<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <fieldset id="custom_data">
            <legend>支持各种类型的数据</legend>
            <div class="form">
                <dl class="row">
                    <dt>一</dt>
                    <dd><select class="first select"></select></dd>
                </dl>
                <dl class="row">
                    <dt>二</dt>
                    <dd><select class="second select"></select></dd>
                </dl>
                <dl class="row">
                    <dt>三</dt>
                    <dd><select class="third select"></select></dd>
                </dl>
                <dl class="row">
                    <dt>四</dt>
                    <dd><select class="fourth select"></select></dd>
                </dl>
                <dl class="row">
                    <dt>五</dt>
                    <dd><select class="fifth select"></select></dd>
                </dl>
            </div>
        </fieldset>
    </body>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script th:src="@{/jquery.cxselect.min.js}"></script>
    <script>
        $('#custom_data').cxSelect({
            selects: ['first', 'second', 'third', 'fourth', 'fifth'],
            required: true,
            jsonValue: 'v',
            data: [
                {'v': '1', 'n': '第一级 >', 's': [
                        {'v': '2', 'n': '第二级 >', 's': [
                                {'v': '3', 'n': '第三级 >', 's': [
                                        {'v': '4', 'n': '第四级 >', 's': [
                                                {'v': '5', 'n': '第五级 >', 's': [
                                                        {'v': '6', 'n': '第六级 >'}
                                                    ]}
                                            ]}
                                    ]}
                            ]}
                    ]},
                {'v': 'test number', 'n': '测试数字', 's': [
                        {'v': 'text', 'n': '文本类型', 's': [
                                {'v': '4', 'n': '4'},
                                {'v': '5', 'n': '5'},
                                {'v': '6', 'n': '6'},
                                {'v': '7', 'n': '7'},
                                {'v': '8', 'n': '8'},
                                {'v': '9', 'n': '9'},
                                {'v': '10', 'n': '10'}
                            ]},
                        {'v': 'number', 'n': '数值类型', 's': [
                                {'v': 11, 'n': 11},
                                {'v': 12, 'n': 12},
                                {'v': 13, 'n': 13},
                                {'v': 14, 'n': 14},
                                {'v': 15, 'n': 15},
                                {'v': 16, 'n': 16},
                                {'v': 17, 'n': 17}
                            ]}
                    ]},
                {'v': 'test boolean','n': '测试 Boolean 类型', 's': [
                        {'v': true ,'n': true},
                        {'v': false ,'n': false}
                    ]},
                {v: 'test quotes', n: '测试属性不加引号', s: [
                        {v: 'quotes', n: '引号'}
                    ]},
                {v: 'test other', n: '测试奇怪的值', s: [
                        {v: '[]', n: '数组（空）'},
                        {v: [1,2,3], n: '数组（数值）'},
                        {v: ['a','b','c'], n: '数组（文字）'},
                        {v: new Date(), n: '日期'},
                        {v: new RegExp('\\d+'), n: '正则对象'},
                        {v: /\d+/, n: '正则直接量'},
                        {v: {}, n: '对象'},
                        {v: document.getElementById('custom_data'), n: 'DOM'},
                        {v: null, n: 'Null'},
                        {n: '未设置 value'}
                    ]},
                {'v': '' , 'n': '无子级'}
            ]
        });
    </script>
</html>
